<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	
	<div class="zoom">
		
	</div>
	<ul>
		<li>d3.behavior.zoom()</li>
		<li>zoom(selection)</li>
		<li>zoom.translate([translate])</li>
		<li>zoom.scale([scale])</li>
		<li>zoom.scaleExtent([extent])</li>
		<li>zoom.center([center])</li>
		<li>zoom.x([x])</li>
		<li>zoom.y([y])</li>
		<li>zoom.on(type,listen)</li>
	</ul>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".zoom").append('svg').attr({"width":width,"height":height});

		var circles = [{cx:150,cy:200,r:30},{cx:220,cy:200,r:30},{cx:150,cy:270,r:30},{cx:220,cy:270,r:30}]

		var zoom = d3.behavior.zoom()
								.scaleExtent([1,10])
								.on("zoom",function(d) {
									d3.select(this).attr("transform",
										"translate(" + d3.event.translate + ")" + "scale("+ d3.event.scale + ")"
									);
								})
		var g = svg.append("g").call(zoom);
		g.selectAll("circle").data(circles).enter().append("circle")
				.attr("cx",function(d) {
					return d.cx;
				})
				.attr("cy",function(d) {
					return d.cy;
				})
				.attr("r",function(d) {
					return d.r;
				})
				.attr("fill","black");

	</script>
</body>
</html>